<template>
    <div class="header-option-filter-wrap">
        <div v-if="lineOptions.length" style="padding: 12px 0 8px 12px">
            <flexbox style="overflow: hidden">
                <div style="flex: 1; overflow: hidden">
                    <flexbox align="flex-start">
                        <div style="width: 60px; height: 30px; line-height: 30px; flex-shrink: 0; color: #999999">产品线：</div>
                        <div style="flex: 1; overflow-x: hidden">
                            <flexbox :class="showAll ? 'all-item' : 'notAll-item'">
                                <a-checkable-tag
                                    :checked="lineActiveKey === index"
                                    v-for="(item, index) of lineOptions"
                                    :key="index"
                                    @change="handleChangeLine($event, index)"
                                    style="margin-bottom: 8px"
                                >
                                    {{ item.catalogName }}
                                </a-checkable-tag>
                            </flexbox>
                        </div>
                    </flexbox>

                    <flexbox align="flex-start" class="margin-t-8">
                        <div style="width: 60px; height: 30px; line-height: 30px; flex-shrink: 0; color: #999999">产品：</div>
                        <div style="flex: 1; overflow-x: hidden">
                            <flexbox :class="showAll ? 'all-item' : 'notAll-item'">
                                <a-checkable-tag
                                    :checked="proActiveKey === index"
                                    v-for="(item, index) of proOptions"
                                    :key="index"
                                    @change="handleChangePro($event, index)"
                                    style="margin-bottom: 8px"
                                >
                                    {{ item.catalogName }}
                                </a-checkable-tag>
                            </flexbox>
                        </div>
                    </flexbox>

                    <flexbox justify="center" style="margin-top: 12px" v-if="showAll">
                        <span style="color: #666666; margin-right: 8px">收起</span>
                        <my-icon type="iconbiaotixiala" :rotate="180" style="color: #2359dd" @click="handleShowAll" />
                    </flexbox>
                </div>
                <flexbox
                    justify="center"
                    direction="column"
                    style="flex-shrink: 0; width: 40px; height: 66px; background: #ffffff; margin-left: 12px"
                    @click="handleShowAll"
                    v-if="!showAll"
                >
                    <div>全</div>
                    <div>部</div>
                    <MenuOutlined />
                </flexbox>
            </flexbox>
        </div>
    </div>
</template>

<script lang="ts">
import { LeftOutlined, RightOutlined, MenuOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, toRefs, nextTick, watch } from 'vue';
export default defineComponent({
    components: {
        LeftOutlined,
        RightOutlined,
        MenuOutlined
    },
    props: {
        checkedLine: {
            type: Number,
            default: 0
        },
        checkedPro: {
            type: Number,
            default: 0
        },
        lineOptions: {
            type: Array,
            default: () => []
        },
        proOptions: {
            type: Array,
            default: () => []
        }
    },
    emits: ['changeLine', 'changePro', 'showMask'],
    setup(props, { emit }) {
        const lineOptionsRef = ref<any>();
        const state = reactive<any>({
            showArrow: false,
            lineActiveKey: 0,
            proActiveKey: 0,
            showAll: false
        });
        const handleShowAll = () => {
            state.showAll = !state.showAll;
            emit('showMask', state.showAll);
        };
        watch(
            () => props.checkedLine,
            () => {
                state.lineActiveKey = props.checkedLine;
            }
        );
        watch(
            () => props.checkedPro,
            () => {
                state.proActiveKey = props.checkedPro;
            }
        );
        const handleChangeLine = (val, index) => {
            emit('changeLine', val, index);
        };
        const handleChangePro = (val, index) => {
            emit('changePro', val, index);
        };
        return {
            lineOptionsRef,
            ...toRefs(state),
            handleChangeLine,
            handleChangePro,
            handleShowAll
        };
    }
});
</script>
<style scoped lang="less">
.header-option-filter-wrap {
    font-size: 14px !important;
    background-color: #fff !important;
    transition: all 0.5s ease;
    ::v-deep(.ant-tabs-bar) {
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
    ::v-deep(.ant-tabs-ink-bar) {
        height: 0 !important;
        background-color: transparent !important;
    }
    ::v-deep(.ant-tabs-nav .ant-tabs-tab) {
        padding: 0px 15px !important;
        border-radius: 4px !important;
        margin-right: 0px !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    ::v-deep(.ant-tag) {
        font-size: 14px !important;
    }
    ::v-deep(.ant-tag-checkable) {
        min-width: 92px;
        max-width: 92px;
        height: 30px;
        line-height: 30px;
        background: #f6f6f6;
        border-radius: 4px;
        text-align: center;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    ::v-deep(.ant-tag-checkable-checked) {
        background: rgba(23, 152, 254, 0.05) !important;
        color: #0478d3;
        border: 1px solid #0478d3;
    }
    z-index: 100;

    //滚动条
    ::-webkit-scrollbar {
        width: 6px;
        height: 0px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #9093994d;
        border-radius: 2px;
        box-shadow: inset 0 0 6px #0003;
    }

    ::-webkit-scrollbar-track {
        background-color: #0000000d;
    }

    ::-moz-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-moz-scrollbar-thumb {
        background-color: #9093994d;
        border-radius: 2px;
        box-shadow: inset 0 0 6px #0003;
    }

    ::-moz-scrollbar-track {
        background-color: #0000000d;
    }
    .notAll-item {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .all-item {
        flex-wrap: wrap;
    }
}
</style>
